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移动 开发 组 件 在 新 华 社 移动 办 公 系 统 的 应 用 


摘 要 : 移动 信息 化 发 展 日 新 月 异 ， 越 来 越 多 的 移动 开发 组 件 被 应 用 在 移动 应 用 的 构建 中 。 本 文 以 新 华 社 移动 信息 化 建设 为 
基础 ， 比 较 三 种 移动 开发 框架 ,介绍 其 中 React 框架 和 Bootstrap 框架 在 新 华 社 移动 办 公 中 的 具体 应 用 场景 ， 最 后 对 新 华 社 移 


动 信息 化 的 发 展 进 行 了 总 结 。 
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在 移动 互联 网 时 代 ， 移 动 化 、 碎 片 化 、 扁 平 化 、 社 
交 化 和 平台 化 的 发 展 趋势 是 变革 的 方向 ， 在 业务 功能 
线 方面 提出 了 比 传统 Web 应 用 更 轻 量化 和 更 高 时 效 的 要 
求 , 在 用 户 体验 方面 提出 了 比 传统 App 更 高 适 配 性 需求 。 
目前 ， 新 华 社 移动 办 公 系 统 已 经 上 线 使 用 ， 实现 了 新 华 
社 专 属 的 移动 端 即时 通信 平台 ， 为 全 社 提供 安全 可 控 、 
具有 内 部 通讯 录 功 能 的 即时 通信 工具 ; 实现 了 统一 的 信 
息 发 布 门户 ， 实 现 采 编发 、 供 稿 在 线 、 办 公 管 理 等 社内 
信息 的 移动 发 布 ; 实现 了 移动 轻 应 用 的 统一 集成 ， 利 用 
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视频 接口 、 文 件 接口 、 地 图 接口 、 选 人 接口 、 创 建 通知 等 。 
2. 移动 端 开发 框架 

目前 ， 常 规 的 移动 开发 技术 如 基于 标准 的 前 端 
HTMLS 框架 ， 不 能 够 实现 动态 加 载 ， 在 终端 适 配 方面 ， 
由 于 移动 端 尺 寸 多 ,不 同 终端 需要 单独 匹配 ， 而 不 同 分 
辩 率 需要 适 配 等 带 来 了 各 种 问题 。 不 仅 导 致 了 页 面 的 错 
综 复 杂 ， 还 消耗 了 终端 设备 过 多 的 流量 和 电量 ， 不 利于 
用 户 体 验 。 在 分 析 比 较 多 种 开发 框架 优 劣 后 ， 技 术 团队 
平衡 传统 办 公 系 统 与 移动 互联 网 双向 互动 的 技术 要 求 ， 
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轻 量 级 开发 框架 完成 了 财务 、 通 告 信息 、 邮 件 类 轻 应 用 
的 开发 和 上 线 。 按 照 移动 互联 网 发 展 规律 ， 在 系统 建设 
时 技术 团队 针对 移动 应 用 开发 ， 提 出 了 轻 量 级 开发 和 高 
适应 性 两 个 基本 原则 ， 尺 量 使 用 传统 办 公 系 统 提 供 的 基 
础 性 模块 ， 以 轻 量 级 组 件 的 方式 为 应 用 提供 服务 ， 实 现 
快速 集成 ; 采用 混合 应 用 开发 框架 ， 以 适应 移动 业务 快 
速 发 展 的 需求 。 
1. 移动 办 公 App 概况 
新 华 社 移动 办 公 App 移动 端 支持 Android 和 IOS 两 
种 主流 移动 操作 系统 ， 移 动 端 将 所 有 功能 按 模块 进行 实 
现 , 基本 可 划分 为 网 络 通信 、 加 密 存储 和 基础 工具 等 模块 。 
网 络 模 块 基于 Netty 实现 TCP 网 络 通讯 ， 移 动 端 与 服务 
端 之 间 在 网 络 模块 使 用 私有 协议 交互 。 加 密 存储 模块 将 
移动 端 文件 进行 加 密 ， 移 动 端 数据 库存 储 采 用 SQLCipher 
框架 进行 开发 ， 数 据 库 支持 国 密 算 法 加 密 。 基 础 工具 模 
块 JavaScriptCore 原生 与 JS 的 交互 模块 、EventBus 组 件 间 
通讯 模块 和 Json 序列 化 与 反 序 列 化 模块 等 。 

App 移动 端 支 持 WebView 技术 ， 通 过 JS-Bridge 解 
决 方案 实现 H5 应 用 和 原生 App 交互 ， 实 现 移 动 端的 本 
地 文件 读 写 、 使 用 GPS 等 功能 。 基 于 JS-Bridge 解决 方案 ， 
移动 办 公 APP 在 JS 层 封装 了 各 种 JS 业务 接口 ， 既 方便 
用 原生 APP 功能 同时 ， 又 实现 了 异步 交互 过 程 ， 降 低 
用 JS 线程 拥塞 概率 。 目 前 ,已 封装 的 本 接 口 有 图 像 接口 、 
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系统 建设 “上 线 + 迭代 ”并 行 式 推进 的 管理 要 求 。 

按照 轻 量 级 开发 和 高 适应 性 两 个 基本 原则 ， 技 术 
队 选 取 了 当前 比较 流行 的 Bootstrap 、jQueryMobile 和 
React 移动 前 端 开 发 框架 进行 对 比 , 目标 是 聚焦 业务 功能 ， 
降低 开发 调试 难度 。 
2. 1Bootstrap 移动 前 端 开发 框架 

Bootstrap 移动 前 端 开发 框架 是 由 Twitter 公司 设计 的 
开源 开发 架构 , 它 组 合 了 HTML 、CSS 和 JavaScript 语言 ， 
并 在 jQuery 基础 上 做 出 了 较 多 改进 ， 形 成 一 套 风格 独特 
的 快速 构建 Web 应 用 的 前 端 开源 框架 。Twitter 公司 从 开 
发 设计 bootstrap 框架 到 全 网 使 用 bootstrap 框架 进行 开发 
已 经 历 多 年 ，bootstrap 框架 也 已 日 趋 成 熟 ， 一 些 优 秀 的 
网 站 也 都 开始 尝试 使 用 bootstrap 框架 进行 开发 与 搭建 ， 
以 满足 互联 网 技术 不 断 迭 代 更 新 的 要 求 ， 如 Ghost、 星 巴 
克 和 Laravel 等 。PC 端 、 移 动 端的 界面 展示 的 快速 适 配 ， 
兼容 性 高 、 响 应 式 布局 和 栅 格 式 设计 等 特点 使 该 框架 赢 
得 了 业内 的 广泛 认可 。 由 于 其 开源 时 间 短 ， 完 善 的 公用 
组 件 库 尚 需 时 间 建 立 ， 不 过 对 于 移动 互联 网 莲 勃 发 展 的 
今天 来 讲 ， 应 该 很 快 不 再 是 问题 。 
2. 2JQueryMobi le 移动 前 端 开发 框架 

JQueryMobile 也 是 一 个 业内 公认 的 强大 的 开源 项 目 ， 
由 Alexander Schmitz 领导 的 团队 开发 完成 。 它 应 用 jQuery 
核心 库 以 及 jQuery 移动 UI 框架 进行 移动 web 开发 设计 ， 
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为 移动 应 用 开发 人 员 提 供 了 一 个 可 在 Android 、ios 等 系统 
移动 平台 实现 界面 风格 统一 的 开发 框架 。JQueryMobile 具 
有 良好 的 兼容 性 ， 支 持 各 种 类 型 与 级 别 的 设备 ， 可 为 不 
支持 javascript 的 设备 提供 更 好 的 体验 。jQueryMobile 框 
架 虽 然 已 经 得 到 了 国内 外 众多 网 站 开发 商 的 认可 ， 但 是 
该 框架 实现 不 同 设备 的 分 辨 率 和 尺寸 适 配 时 相对 烦琐 ， 
对 动态 效果 的 响应 也 相对 较 差 。 
2. 3React 移动 前 端 开发 框架 

自 2013 年 Facebook 发 布 以 来 ，React 吸引 了 越 来 越 
多 的 开发 者 ， 基 于 它 的 衍生 技术 ， 如 React Native 、React 
Canvas 等 也 层出不穷 。JSX 是 React 的 核心 组 成 部 分 ， 它 
使 用 XML 标记 的 方式 直接 声明 界面 ，UI 界面 组 件 之 间 
可 以 互相 骨 套 ， 通 过 数据 模型 驱动 UI 界面 编程 ，UI 界 
面 之 间 通 过 虚拟 DOM ( Virtual DOM ) 方式 实现 层 羞 式 刷 
新 。 在 浏览 器 端 用 Javascript 实现 了 一 套 DOM API。 基 于 
React 进行 开发 时 所 有 的 DOM 构造 都 是 通过 虚拟 DOM 进 
行 ， 每 当 数 据 变化 时 ，React 会 重新 构建 整个 DOM 树 ， 
然后 React 将 当前 整个 DOM 树 和 上 一 次 的 DOM 树 进行 
对 比 ， 得 到 DOM 结构 的 区 别 ， 然 后 仅仅 将 需要 变化 的 部 
分 进行 实际 的 浏览 絮 DOM 更 新 。 而 且 React 能 够 批 处 理 
虚拟 DOM 的 刷新 ， 在 一 个 事件 循环 (Event Loop ) 内 的 
两 次 数据 变化 会 被 合并 。 

虚拟 DOM 不 仅 带 来 了 简单 的 UI 开发 逻辑 ， 同 时 也 
带 来 了 组 件 化 开发 的 思想 。React 将 UI 上 每 一 个 功能 
对 独立 的 模块 定义 成 组 件 ， 然 后 将 小 的 组 件 通 过 组 合 或 
者 黄 套 的 方式 构成 大 的 组 件 ， 最 终 完成 整体 UI 的 构建 。 
每 个 组 件 的 UI 和 逮 辑 都 定义 在 组 件 内 部 ， 和 外 部 完全 通 
过 API 来 交互 ， 通 过 组 合 的 方式 实现 复杂 的 功能 ， 每 个 
组 件 间 都 可 以 重用 和 重组 。 
3. 框架 应 用 实例 
3.1 应 用 框架 组 件 解 决 的 实际 问题 
3.1.1Web 资源 的 动态 加 载 

资源 的 动态 加 载 技术 需要 完成 移动 端 原生 接口 的 
调用 ， 解 决 图 片 、 样 式 等 小 文件 带 来 的 性 能 瓶颈 问题 ， 
并 以 较 低 的 开发 成 本 和 学 习 成 本 ， 解 决 应 用 迭代、 轻 量 
发 布 等 问题 。 在 业务 和 样式 上 上， 前端 开发 人 员 只 需要 在 
代码 块头 部 引用 需要 的 揪 件 库 ; 在 逻辑 上 ， 开 发 人 员 
只 需 调 用 后 端 提 供 的 接口 进行 读 取 与 显示 。 客 户 端的 
JavaScript 引擎 按照 动态 加 载 策略 ， 完 成 复杂 内 容 的 动态 
加 载 工作 ， 优 化 用 户 体验 。 
3.1.2 通用 模块 预制 工作 

在 前 端 人 员 开 发 移动 应 用 项 目的 基础 上 , 总 结 常用 、 
通用 模块 进行 统一 封装 , 模块 化 处 理 常 用 的 信息 页 分 页 、 
统一 页 头 引用 、 和 常用 按钮 等 功能 。 这 样 既 可 快速 实现 移 
动 端的 页 面 风 格 的 一 致 性 ， 也 可 在 移动 端 调试 时 快速 定 
位 相关 问题 ， 实 现 一 次 修改 多 处 应 用 。 定 义 多 个 模块 相 
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互 调用 规范 ， 既 保证 了 各 个 模块 之 间 不 发 生 冲 突 ， 又 提 
高 了 开发 人 员 的 编码 效率 。 针 对 多 个 模块 化 的 调用 、 区 
分 较 复杂 ， 在 建立 不 同 模块 化 的 同时 ， 必 须 严 格 规定 模 
块 名 称 及 其 信息 ， 形 成 规范 化 文档 。 

3.1.3 终端 界面 适 配 工作 

根据 不 同 分 辨 率 、 屏 幕 尺寸 开展 浏览 器 适 配 工作 是 
移动 Web 应 用 开发 需要 面 对 的 一 个 重要 问题 ， 移 动 开发 
框架 很 好 地 解决 了 分 状 率 适 配 这 个 问题 。 在 框架 开发 的 
代码 中 ， 仅 需 设 置 宽度 和 视 口 设置 内 容 等 必须 属性 ， 即 
可 适 配 移动 端 各 个 设备 、 各 个 型 号 的 手机 ， 做 到 一 套 代 
码 多 次 利用 。 界面 适 配 统一 规范 了 应 用 内 部 的 动态 弹出 、 
用 户 等 待 和 数据 加 载 等 样式 ， 解 决 界面 适 配 工作 同时 统 
一 交互 界面 风格 ， 未 来 将 定制 多 套 样式 风格 供 不 同 场景 
使 用 。 

3. 2 移动 开发 框架 的 应 用 

在 新 华 社 传统 OA 系统 基础 上 ， 利 用 移动 开发 框架 
和 组 件 开 发 移动 首页 ,与 OA 办 公 、 财 务 .邮件 等 系统 对 接 ， 
实现 信息 内 容 移动 端 发 布 、 应 用 统一 集成 的 目标 。 目 前 ， 
移动 首页 集成 了 会 议 室 预定 、 领 导 请 假 、 新 华 简讯 等 多 
个 轻 应 用 。 

(1) 移动 “首页 ”应 用 前 端 采 用 Reaet 框架 进行 
Dom 演 染 ,后台 采用 node.js 技术 进行 Dom 内 容 资源 的 生 
成 。“ 首 页 ”应 用 支持 分 栏目 、 按 权限 的 列表 展示 信息 ， 
用 户 只 可 阅读 自己 权限 范围 内 的 信息 。 信 息 通 过 列表 展 
示 标 题 、 发 布 时 间 等 内 容 ， 针 对 正文 包括 图 片 的 信息 ， 
在 首页 中 显示 正文 的 第 一 张 图 片 , 点 击 后 可 进入 详情 页 。 
通过 下 拉 方 式 刷 新 信息 目录 ， 每 页 显示 20 条 信息 ， 可 通 
过 下 拉 页 面 “ 加 载 更 多 ”显示 更 多 消息 。 如 


下 图 所 示 。 
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图 1 React 框架 开发 的 移动 首页 


(2 ) 移动 办 公 系 统 中 开发 多 个 辅助 办 公 轻 应 用 ， 
涉及 传统 PC 网 页 办 公 系 统 和 移动 端 两 个 方面 。 采 用 
Bootstrap 框架 进行 开发 设计 ， 技 术 上 实现 了 应 用 运行 在 
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同一 个 后 台 ， 采 用 一 套 代 码 开发 实现 “两 端 ” 共 用 。 辅 
助 办 公 包 括 会 议 室 预定 、 领 导 请 假 、 交 接班 等 应 用 功能 ， 
在 传统 OA 网 页 端 和 客户 端 ， 需 要 响应 鼠标 点 击 事件 、 
键盘 录入 和 数据 提交 等 操作 ; 在 移动 端 ， 轻 应 用 需要 响 
应 屏幕 滑动 事件 、 点 击 事件 、 异 步 刷 新 和 数据 提交 等 操作 。 

以 移动 端 会 议 室 预 定 功 能 为 例 , 说 明 应 用 使 用 场景 。 
当 用 户 需 要 预定 会 议 室 时 , 在 移动 端点 击 “ 会 议 室 预定 ” 
按钮 ， 进 入 预定 查看 界面 ， 通 过 时 间 轴 和 会 议 室 位 置 确 
定 需要 预定 会 议 室 的 使 用 区 间 。 用 户 选择 会 议 室 使 用 区 
间 后 ， 进 入 审批 环节 ， 由 会 议 室 管理 员 进 行 相关 操作 。 
全 部 后 台 审 批 操作 不 仅 在 前 端 可 以 实时 查阅 ， 当 有 状态 
变化 时 ， 用 户 可 以 收 到 推送 通知 。 图 2/3/4 为 新 华 社 移动 
办 公 系 统 中 的 会 议 室 预定 功能 页 面 ， 分 别 对 应 移动 端 、 
PC 客户 端 以 及 Web 端 三 端的 页 面 ， 应 用 Bootstrap 框架 
实现 了 一 次 开发 多 终端 适 配 。 
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总 结 

移动 办 公 轻 应 用 的 开发 第 一 次 实现 传统 办 公 系统 与 
移动 互联 网 双向 互动 ， 将 传统 OA 系统 适宜 开放 在 互联 
网 的 功能 与 移动 办 公 系 统 融 合 。 这 些 功 能 既是 传统 办 公 
系统 与 互联 网 的 可 控 融 合 ， 又 贴近 报道 指挥 第 一 线 。 在 
开发 建设 过 程 中 ， 遇 到 传统 办 公 系 统 内 部 耦合 性 高 、 不 
同系 统 使 用 各 自 的 框架 等 问题 。 而 且 ， 就 使 用 到 的 开发 
框架 而 言 ， 大 多 数 采 用 开源 框架 , 版 本 更 迭 演 进 速 度 快 ， 
这 就 对 技术 人 员 提 出 了 更 高 开发 能 力 要 求 。 

新 华 社 移 动 办 公 轻 应 用 同 互联 网 应 用 还 是 有 区 别 的 ， 
互联 网 应 用 更 新 换代 的 速度 非常 快 ， 而 内 部 办 公使 用 的 
应 用 具有 一 定 的 稳定 性 。 这 就 要 求 技术 人 员 在 具备 开发 
能 力 的 基础 上 锻炼 技术 整合 、 追 踪 的 能 力 ， 时 刻 追 踪 新 
技术 发 展 ,合理 整合 使 用 开发 框架 。 里 
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